<template>
    <view>
        <!-- 订单未支付 -->
        <view class="box_8 security">
            <view class="section_5 flex flex-align-center" v-if="status == 0">
                <van-button @click="goHome" custom-class="go_home" type="default">返回首页</van-button>
                <van-button @click="close" custom-class="cancellation" type="default">取消订单</van-button>
                <van-button @click="paly" custom-class="button_2" type="default">立即支付</van-button>
            </view>

            <view class="section_5 flex flex-align-center" v-if="status == 2 || status == 1">
                <van-button @click="goHome" custom-class="go_home" type="default">返回首页</van-button>
            </view>

            <view class="section_5 flex flex-align-center" v-if="status == 6 || status == 8">
                <van-button @click="goHome" custom-class="go_home" type="default">返回首页</van-button>
                <van-button @click="buyAgain" custom-class=" go" type="default">再次购买</van-button>
            </view>

            <view class="image-wrapper_1"></view>
        </view>

        <van-popup :show="show" closeable position="bottom" round @close="onClose">
            <view style="padding: 52rpx">
                <view class="zhifu">确认支付</view>
                <view class="price">¥{{ orderDetails.shouldPay }}</view>
                <view class="flex flex-justify-between" style="border-top: #f0f0f0 1px solid; padding-top: 48rpx">
                    <view class="flex">
                        <image src="@/static/images/icon_wx.png" style="width: 48rpx; height: 40rpx" mode="" />
                        <view class="payment_text">确定</view>
                    </view>
                    <image src="@/static/images/icon_empower.png" style="width: 40rpx; height: 40rpx" />
                </view>
                <van-button type="primary" block custom-class="immediately" @click="immediately">确定</van-button>
            </view>
        </van-popup>
    </view>
</template>

<script>
// components/payment/index.js
import { closeOrder, repay, previewOrder, removeGoods } from '@/api/index/index';
export default {
    data() {
        return {
            status: 0,
            show: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        status: {
            type: Number //0 待付款,1 超时关闭,2 付款成功,3待接单,4 进行中,5 完成 6 已退款")
        },

        orderId: {
            type: Number
        },
        orderDetails: {
            type: Object
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //返回首页
        goHome() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },
        //取消订单
        close() {
            closeOrder({
                orderId: this.orderId
            }).then((res) => {
                this.$emit('myevent');
            });
        },
        //再次购买
        buyAgain() {
            let p = [];
            this.orderDetails.orderDetails.map((item) => {
                p.push({
                    goodsId: item.goodsId,
                    count: item.count
                });
            });
            previewOrder({
                orderDetails: p
            })
                .then((res) => {
                    let params = JSON.stringify(res.data);
                    uni.navigateTo({
                        url: '/pages/placeOrder/index?params=' + encodeURIComponent(params)
                    });
                })
                .catch((rej) => {
                    uni.showToast({
                        title: rej.data.msg,
                        icon: 'none'
                    });
                });
        },
        //立即购买
        paly() {
            console.log(this.orderDetails);
            this.setData({
                show: true
            });
        },
        onClose() {
            this.setData({
                show: false
            });
        },
        //立即支付
        immediately() {
            repay({
                id: this.orderId
            }).then((res) => {
                let payData = JSON.parse(res.data.payData);
                uni.requestPayment({
                    timeStamp: payData.timeStamp,
                    nonceStr: payData.nonceStr,
                    package: payData.packageVal,
                    signType: 'MD5',
                    paySign: payData.paySign,
                    success: (res) => {
                        let list = [];
                        console.log(this.orderDetails);
                        this.orderDetails.orderDetails.map((item) => {
                            list.push(item.goodsId);
                        });
                        removeGoods(list).then((res) => {
                            this.setData({
                                show: false
                            });
                            this.$emit('myevent');
                        });
                    },
                    fail: (rej) => {
                        this.$emit('myevent');
                        this.setData({
                            show: false
                        });
                        uni.showToast({
                            title: rej.data.msg,
                            icon: 'none'
                        });
                    }
                });
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
